<template>
    <div>
      <div class="content-box">
        <h6 class="title-h6">产品信息</h6>
        <linkpro-top></linkpro-top>
       
      </div>
      <div class="content-box" v-if="proLink.putChannel.length > 0">
        <h6 class="title-h6">添加产品链接</h6>
        <div style="margin:10px 0 0 10px">
          <el-form :label-position="labelPosition" label-width="100px" :model="addproLink" :inline="true" ref="addproLink" class="prolink">
          <el-form-item label="投放渠道" >
            <el-select  placeholder="请选择投放渠道" v-model="addproLink.putChannel" :disabled="editProInfo.editorFlag?true:false">
              <el-option v-for="(item, index) in proLink.putChannel" :key="index" :value="item">{{item}}</el-option>
            </el-select>
          </el-form-item>  
          <!-- <el-form-item v-show="addproLink.putChannel != '收藏夹'" > -->
            <el-form-item  label="使用权重规则" v-show="addproLink.putChannel === '收藏夹'">
            <el-select  placeholder="请选择使用权重规则" v-model="shoucangjia.rank">
              <el-option v-for="(item, index) in rankArr" :key="index" :value="item">{{item}}</el-option>
            </el-select>
          </el-form-item>
           <el-form-item  label="分类" v-show="addproLink.putChannel === '收藏夹'">
            <el-select  placeholder="请选择分类" v-model="shoucangjia.category">
              <el-option v-for="(item, index) in categoryArr" :key="index" :value="item">{{item}}</el-option>
            </el-select>
          </el-form-item>
            <el-form-item :label="packLabel">
              <el-input v-model="addproLink.packNumber" :placeholder="'请输入'+packLabel"></el-input>
            </el-form-item>
            <el-form-item :label="downloadLinkLabel" >
              <el-input v-model="addproLink.downloadLink" :placeholder="'请输入'+downloadLinkLabel"></el-input>
            </el-form-item>
            <el-form-item :label="packNameLabel">
              <el-input v-model="addproLink.packName" :placeholder="'请输入'+packNameLabel"></el-input>
            </el-form-item>
            <el-form-item :label="parameterLabel" v-show="addproLink.putChannel != '收藏夹'">
              <el-input v-model="addproLink.parameter" :placeholder="'请输入'+parameterLabel"></el-input>
            </el-form-item>
            <el-form-item label="备注信息" >
              <el-input type="textarea" v-model="addproLink.remak" placeholder="请输入备注信息，最多255个字符"></el-input>
            </el-form-item>
            <div>
              <el-form-item label="站点" v-show="addproLink.putChannel === '本地包'">
              <el-checkbox-group v-model="addproLink.website">
                  <el-col v-for="(val, key, index) in website" :key='index' style="padding-left:100px;">
                    <span class="webname">{{key}}</span>
                    <el-checkbox :label="item" name="website" v-for="(item, i) in val" :key="i"></el-checkbox>
                  </el-col>
                  
              </el-checkbox-group>
            </el-form-item>
            </div>
            <el-form-item label="对应软件ID" v-show="addproLink.putChannel === '本地包'">
                <el-input type="textarea" v-model="addproLink.softId" placeholder="请输入对应软件ID"></el-input>
                <el-col :span="24" style="color:red;text-align:left;line-height:20px;" >
                  注意:多个ID请用英文逗号(,)分割！
              </el-col>
            </el-form-item>
          <!-- </el-form-item> -->
          
          <div>
            <el-form-item style="padding-left:100px;">

            <el-button type="success" @click="saveProLink('addproLink')" v-text="editProInfo.editorFlag?'编辑': '添加'"></el-button>
            
          </el-form-item>
          </div>
        </el-form>
        </div>
      </div>
      <div class="content-box">
        <h6 class="title-h6">产品链接列表</h6>
        <div class="search" style="padding-top:10px;padding-left:50px;">
            <el-form :inline="true" :model="searchForm" style="text-align:left">
                <el-form-item label="投放渠道" >
                  <el-select  placeholder="请选择投放渠道" v-model="searchForm.putChannel">
                    <el-option v-for="(item, index) in proLink.putChannel" :key="index" :value="item">{{item}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="状态" >
                  <el-select  placeholder="请选择状态" v-model="searchForm.status">
                    <el-option v-for="(item, index) in proStaus" :key="index" :value="item">{{item}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                <el-button type="primary">搜索</el-button>
              </el-form-item>  
            </el-form>
        </div>
        <div class="">
          <div style="padding:10px;">
            <el-table
            :data="tableData"
            style="width: 100%;text-align:center" border>
            <el-table-column
              label="投放渠道"
              width="180" prop="putChannel" align="center">
            </el-table-column>
            <el-table-column
              label="软件包渠道号"
              width="180" prop="packNumber" align="center">
            </el-table-column>
            <el-table-column
              label="软件包下载地址"
              width="180" prop="downloadLink" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column
              label="软件包名称"
              width="180" prop="packName" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column
              label="静默参数"
              width="180" prop="parameter" align="center">
            </el-table-column>
            <el-table-column
              label="备注"
              width="180" prop="安装" align="center">
            </el-table-column>
            <el-table-column
              label="状态"
              width="180" prop="123" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
          <div style="padding-top:10px;padding-bottom:20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400" background>
            </el-pagination>
          </div>
          
        </div>
      </div>
    </div>
</template>

<script>
import  LinkproTop  from '@/components/Product/LinkproTop'
import {mapGetters, mapActions} from 'vuex'
export default {
  name: 'ProlinkManage',
  components: {
    LinkproTop 
  },
  data () {
    return {
      addproLink: {
        putChannel: '',
        packNumber: '',
        downloadLink: '',
        packName:'',
        parameter: '',
        remark: '',
        website: [], //本地包
        softId:'', //本地包
      },
      searchForm: {
        putChannel: '',
        status: '',
      },
      shoucangjia: {
        rank: '',
        category: ''
      },
      website: [], //本地包
      softId:'', //本地包
      currentPage4: 1,
      labelPosition: 'right',
      materialType: 1, //下载器的物料类型
      parameterLabel: '静默参数',
      packLabel: '软件包渠道号',
      downloadLinkLabel: '下载地址',
      packNameLabel: '软件包名',
      rankArr: ['hao360', 'baidu'], //使用权重规则
      categoryArr: ['收藏夹-导航', '收藏夹-搜索', '收藏夹-电商'], //收藏夹分类
      website:{ //站点
        H: ['华军软件园', '华军软件园(画中画)'],
        T: ['太平洋下载', '太平洋下载(画中画)', '太平洋游戏站'],
        X: ['西西下载', '西西诱导位', '新云下载', '新云诱导', '系统大全XP85']
      },
      editorFlag: false,
      proLink: { // 产品链接管理
        name: '爱奇艺',
        byname: '爱奇艺',
        customer: '爱奇艺有限公司',
        putChannel: ['下载器', '本地包', '外放', '收藏夹']
      },
      proStaus: ['上线', '下线'],
      tableData: [{
          putChannel: '下载器',
          packNumber: '99955749',
          downloadLink: 'https://www.hao123.com/?tn=99955749_hao_pg',
          packName: 'Intrenet Explorer',
          parameter:'-',
          remark: '其他',
          status: '下线',
          123: '-',
          安装: '其他'
        }, {
          putChannel: '下载器',
          packNumber: '99955749',
          downloadLink: 'https://www.hao123.com/?tn=99955749_hao_pg',
          packName: 'Intrenet Explorer',
          parameter:'-',
          remark: '其他',
          status: '下线',
        }, {
          putChannel: '下载器',
          packNumber: '99955749',
          downloadLink: 'https://www.hao123.com/?tn=99955749_hao_pg',
          packName: 'Intrenet Explorer',
          parameter:'-',
          remark: '其他',
          status: '下线',
        }, {
         putChannel: '下载器',
          packNumber: '99955749',
          downloadLink: 'https://www.hao123.com/?tn=99955749_hao_pg',
          packName: 'Intrenet Explorer',
          parameter:'-',
          remark: '其他',
          status: '下线',
        }]
    }
  },
  created() {
    this.setProLink(this.proLink)

    if(this.materialType === 1) { //判断下载器物料类型
      this.parameterLabel = '静默参数'
    }else {
      this.parameterLabel = '桌面链接'
    }
    this.addproLink = this.editProInfo.addproLink;
    this.editorFlag = this.editorFlag.editorFlag;
  },
  watch: {
    putChannel(val, oldVal) {
      if(val === '收藏夹') {
        this.packLabel = '链接渠道号';
        this.downloadLinkLabel = '链接地址';
        this.packNameLabel = '链接名称';
        this.addproLink['shoucangjia'] = this.shoucangjia;
      }else {
        delete this.addproLink['shoucangjia'];
      }
      console.log(this.addproLink);
      console.log('putChannel' + val, oldVal)
    }
  },
  computed: {
    ...mapGetters([
      'editProInfo'
    ]),
    putChannel() {
      return this.addproLink.putChannel
    }
  },
  methods: {
    ...mapActions([
      'setProLink',
      'setAddProLink', 
      'setEditorFlag'
    ]),
    saveProLink(name) { //添加的提交

    },
    handleEdit(index, row) {
      this.setEditorFlag(true);

      this.addproLink.putChannel = '收藏夹'
      this.setAddProLink(this.addproLink)
      console.log(this.editProInfo)
      // this.editorFlag = true;
      // alert(index)
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
  }
}
</script>

<style lang="scss" scoped>
  .prolink {
    text-align: left;
    font-size: 13px;
    .el-input__inner {
      height: 25px;
      line-height: 25px;
    }
    .el-checkbox-group {
      .el-checkbox {
        text-align: left;
      }
    }
  }
  
</style>
<style>
.prolink .el-form-item {
  margin-bottom: 10px;
}
.prolink .el-form-item__label, .prolink .el-form-item__content {
  line-height: 30px;
}
.prolink .el-select, .prolink .el-input {
  width: 180px;
  font-size: 14px;
}
.prolink .el-textarea {
  width: 300px;
}
.prolink .el-checkbox {
  line-height: 30px;
}
.prolink .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.prolink .webname {
  color: #000;
  font-size: 14px;
  margin-right: 10px;
}
/* .el-table__body-wrapper tbody tr:hover {
  background-color: greenyellow
} */
</style>


